<template>
	<div class="index">
		<Header></Header>
		<Earth ref="earth"></Earth>
		<!-- 内容 -->
		<div class="conent">
			<div class="conent-flex">
				<!-- 左边 -->
				<div class="conent-flex-l">
					<!--  -->
					<div class="flex-t">
						<!--  -->
						<div class="flex-t-t">
							<div :class="['flex-t-t-l', Inv == 1 ? 'inv-h-se' : '']" @click="changetap(1)"><span>数据资源</span></div>
							<div :class="['flex-t-t-l', Inv == 3 ? 'inv-h-se' : '']" @click="changetap(3)"><span>功能资源</span></div>
						</div>
						<!--  -->
						<!-- <div class="flex-t-t1" v-show="Inv == 2">
							<input type="text" name="" id="" placeholder="请输入内容" />
							<img src="../assets/sousuo.png" alt="" />
						</div> -->
					</div>
					<!-- 数据资源切换 -->
					<div class="flex-top" v-show="Inv == 1" v-for="item in lists1" :key="item.label + '1'">
						<div class="flex-top-t" @click="showCont(item)">
							<div class="flex-top-t-l">
								<span>{{ item.label }}</span>
							</div>
							<div class="flex-top-t-icon"><i class="el-icon-arrow-down" style="color: #FFFFFF;"></i></div>
						</div>
						<!-- 二級 -->
						<div v-if="item.shows" class="con">
							<div v-for="(items1, index) of item.children" :key="index">
								<div class="flex-top-t1-1">
									<div class="flex-top-t-l" :class="items1.id == clickid ? 'actives' : ''" @click="changecolorE(items1.id, items1, index)">
										<span>{{ items1.label }}</span>
									</div>
									<div><!-- <img src="../assets/maps/jian_icon.png" alt="" style="width:2rem"/> --></div>
								</div>
								<!-- 三级v-if="item.showThree" -->
								<!-- :class="isSelectedSomeThings(item.title) ? 'actives' : ''" -->
								<div>
									<div
										class="detail3"
										@click="changecolor(item.title, items1.label, item.name, item.id)"
										v-for="(item, index) in items1.children"
										:key="index"
										v-show="showT"
										:class="[item.id == clickid ? 'actives' : '']"
									>
										<div class="detail3-text">{{ item.title }}</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<!-- <div v-show="Inv == 1" class="flex-top">
            <el-tree
              :data="lists1"
              :default-expand-all="true"
              :props="defaultProps"
              @node-click="handleNodeClick"
            ></el-tree>
          </div> -->
					<!-- 功能资源 -->
					<div class="flex-top" v-show="Inv == 3" v-for="item in list" :key="item.title + '1'">
						<div class="flex-top-t" @click="showContT(item)">
							<div class="flex-top-t-l">
								<span>{{ item.title }}</span>
							</div>
							<div><i class="el-icon-arrow-down" style="color: #FFFFFF;"></i></div>
						</div>
						<!-- 点击事件 -->
						<!-- :class="[items.title == clickidji ? 'actives1' : '']" -->
						<!-- {{(item.show ?? true).toString()}} -->
						<div
							v-if="item.show"
							style="display: flex;
            display: -webkit-flex;
            justify-content: space-between;
            flex-direction: row;
            flex-wrap: wrap; background-color: #FFFFFF;"
						>
							<div
								class="flex-top-t1"
								@click="changecolorji(items.title, item.title)"
								v-show="showT"
								v-for="items in item.data"
								:key="items.title + '3'"
								:class="isSelectedSomeThing(items.title) ? 'actives1' : ''"
							>
								<div class="flex-top-t-l-u">
									<div class="flex-top-t-l-u-img"><img :src="items.photo" alt="" /></div>
									<div>{{ items.title }}</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- 右边 -->
				<!-- <div class="conent-flex-r">
          <div class="conent-flex-r-t">
            <img src="../assets/maps/juli.png" alt="" />
          </div>
          <div class="conent-flex-r-t">
            <img src="../assets/maps/height.png" alt="" />
          </div>
          <div class="conent-flex-r-t">
            <img src="../assets/maps/weight.png" alt="" />
          </div>
          <div class="conent-flex-r-t">
            <img src="../assets/maps/dixia.png" alt="" />
          </div>
          <div class="conent-flex-r-t">
            <img src="../assets/maps/shuxing.png" alt="" />
          </div>
        </div> -->
			</div>
			<!-- <div class="images">
        <img src="../assets/my/mys.png" alt="" />
      </div> -->
		</div>
		<!-- 属性弹框  -->
		<div class="xbsj-model-box" @click="showclick" v-show="showT2">
			<!-- 内容 -->
			<div class="model-content">
				<div class="content-box" v-for="(item, index) in attrData" :key="index">
					<div class="content-box-c" :style="{ width: width }">
						<span class="content-box-l">{{ item.key }}</span>
					</div>

					<span class="content-box-r">{{ item.value }}</span>
				</div>
				<!-- <div class="content-box">
          <span class="content-box-l">标题</span
          ><span class="content-box-r">内容内容内容内容内容内容内容内容内容内内容内容内容内容内容内容内容内容内容内容容内容内容内容内容</span>
        </div> -->
				<!-- 底部按钮 -->
				<div class="xbsj-model-footers">
					<el-button size="mini" style="background-color: #146AC1; color: #FFFFFF;  opacity: .5; margin-right: 0.5rem;" @click="ok">关闭</el-button>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
import { maps, resourcesE } from '../api/api.js';
import Header from '@/components/header.vue';
import Earth from './Earth/index';
let imgurl = 'http://117.73.254.217:2221/resources';

export default {
	name: 'maps',
	components: {
		Header,
		Earth
	},
	data() {
		return {
			show: true,
			shows: true,
			showT: true,
			// showT1: true,
			// 属性弹框
			showT2: true,
			//
			showThree: false,
			//
			clickid: '',
			//
			Inv: 1,
			list: [],
			lists1: [],
			selectedList: [],
			selectedListS: [],
			dataSourceMap: [],
			// 地质数据
			listArr: [],
			type: '',
			name: '',
			// 隐藏显示
			attrData: [
				{ key: 'file', value: 1111 },
				{ key: 'names', value: 1111 },
				{ key: 'footerd', value: 1111 }
				// { key: "names", value: 1111 },
				// { key: "footerd", value: 1111 },
				// { key: "names", value: 1111 },
				// { key: "footerd", value: 1111 },
				// { key: "names", value: 1111 },
				// { key: "footerd", value: 1111 },
				//  { key: "names", value: 1111 },
				// { key: "footerd", value: 1111 },
				// { key: "names", value: 1111 },
				// { key: "footerd", value: 1111 },
			],
			//
			defaultProps: {
				children: 'children',
				label: 'label'
			},
			opc: 1.0,
			// 二级
			childrens: [],
			width: ''
		};
	},
	created() {
		console.log(process.env.NODE_ENV);
		this.type = this.$route.params.type;
		this.name = this.$route.params.name;
		console.log(this.type);
		console.log(this.name);
		this.lists();
		this.listL();
	},
	mounted() {
	},
	methods: {
		//
		listL() {
			var arr = [];
			for (var i = 0; i < this.attrData.length; i++) {
				arr.push(Number(this.attrData[i].key.length));
			}
			this.width = Math.max.apply(null, arr) - 1.9 + 'rem';
		},
		// 点击切换
		changetap(value) {
			this.clickid = '';
			this.Inv = value;
			let formData = new FormData();
			this.tokes = sessionStorage.getItem('token');
			formData.append('token', this.tokes);
			formData.append('type', this.Inv);
			maps(formData).then(res => {
				if (this.Inv == 1) {
					console.log(res);
					this.lists1 = res.data;
					this.lists1.forEach(e => (e.shows = true));
				} else if (this.Inv == 3) {
					this.list = res.data;
					console.log(res);
					for (var i = 0; i < this.list.length; i++) {
						for (var j = 0; j < this.list[i].data.length; j++) {
							this.list[i].data[j].photo = imgurl + this.list[i].data[j].photo;
						}
					}
					this.list.forEach(e => (e.show = true));
					// 默认选中第一个
					// this.selectedList = this.list
					//   .map((i) => (i.data.length === 0 ? null : i.data[0].title))
					//   .filter((i) => i !== null);

					// console.log("this.selectedList: ", this.selectedList);
				}
			});
		},
		// 点击第一勘察院
		isSelectedSomeThings(menu) {
			return this.selectedListS.indexOf(menu) != -1;
		},
		// 获取一组
		getGroupByTitles(title) {
			return this.lists1.find(i => i.title === title);
		},
		// 点击三级
		changecolor(e, i, a, id) {
			console.log(a);
			this.clickid = id;
			let groupValues1 = this.getGroupByTitles(i);
			let exitsSecondMenus1 = [];
			if (groupValues1) {
				exitsSecondMenus1 = groupValues1.data.map(i => i.title);
				// 过滤掉当前组内的所有二级
				this.selectedListS = this.selectedListS.filter(i => exitsSecondMenus1.indexOf(i) === -1);
			}
			// this.selectedListS.push(e);
			//
			let astr = a.toString();
			console.log(astr.substr(astr.length - 4, 4));
			if (astr.substr(astr.length - 7, 7) === 'geojson') {
				this.controlGeojson(a);
			} else {
				this.controlTile(a);
			}
		},
		controlGeojson(url) {
			let param1 = arguments[1];
			let name = url.split('/')[url.split('/').length - 1];
			if (param1) {
				if (this.$root._earth._viewer.entities.values.length > 1) {
					this.unloadGeojson(url, param1);
				} else {
					this.loadGeojson(url, param1);
				}
			} else {
				if (this.containsName(this.$root._earth._viewer.dataSources._dataSources, name)) {
					this.unloadGeojson(url, param1);
				} else {
					this.loadGeojson(url, param1);
				}
			}
		},
		containsName(objs, name) {
			let result = false;
			for (let ds in objs) {
				if (objs[ds]._name === name) {
					result = true;
					break;
				}
			}
			return result;
		},
		loadGeojson(url) {
			let obj = new Object();
			obj.url = url;
			let self = this;
			// eslint-disable-next-line no-undef
			obj.data = Cesium.GeoJsonDataSource.load(url, {
				// eslint-disable-next-line no-undef
				stroke: Cesium.Color.fromRandom({ alpha: 1.0 }),
				strokeWidth: 3
			});
			this.dataSourceMap.push(obj);
			obj.data.then(function(dataSource) {
				self.$root._earth._viewer.dataSources.add(dataSource);
			});
			this.$root._earth._viewer.flyTo(obj.data);
		},
		unloadGeojson(url) {
			let param1 = arguments[1];
			let self = this;
			if (param1) {
				self.$root._earth._viewer.entities.removeAll();
			}
			this.dataSourceMap
				.filter(ele => {
					return ele.url === url;
				})[0]
				.data.then(dataSource => {
					self.$root._earth._viewer.dataSources.remove(dataSource);
				});
			this.dataSourceMap = this.dataSourceMap.filter(ele => {
				return ele.url !== url;
			});
		},
		controlTerrain(url) {
			if (this.containsKey(this.$root._earth.sceneTree.$refs, url) && this.$root._earth.sceneTree.$refs[url].czmObject.url != '') {
				this.unloadTerrain(url);
			} else {
				this.loadTerrain(url);
			}
		},
		loadTerrain(url) {
			let terrain = {
				ref: url,
				czmObject: {
					xbsjType: 'Terrain',
					name: url,
					xbsjTerrainProvider: {
						type: 'XbsjCesiumTerrainProvider',
						XbsjCesiumTerrainProvider: {
							url: url,
							requestVertexNormals: true,
							requestWaterMask: true
						}
					}
				}
			};
			if (this.$root._earth.sceneTree.$refs[url]) {
				this.$root._earth.sceneTree.$refs[url].czmObject = terrain.czmObject;
			} else {
				this.$root._earth.sceneTree.root.children.push(terrain);
			}
		},
		unloadTerrain(url) {
			this.$root._earth.sceneTree.$refs[url].czmObject = {};
		},
		controlTile(url) {
			let tileJson = arguments[1];
			if (this.containsKey(this.$root._earth.sceneTree.$refs, url) && this.$root._earth.sceneTree.$refs[url].czmObject.url != '') {
				this.unloadTile(url);
			} else {
				this.loadTile(url, tileJson);
			}
		},
		containsKey(obj, key) {
			let result = false;
			for (let k in obj) {
				if (k === key) {
					result = true;
					break;
				}
			}
			return result;
		},
		sceneTreeRemoveItem(fucText) {
			this.$root._earth.sceneTree.root.children.forEach(element => {
				if (element.czmObject.name === fucText) {
					element.czmObject = {};
				}
			});
		},
		loadTile(url) {
			console.log(url);
			let tileJson = arguments[1];
			let tile;
			if (tileJson) {
				tile = tileJson;
			} else {
				tile = {
					ref: url,
					czmObject: {
						xbsjType: 'Tileset',
						name: url,
						url: url
					}
				};
			}
			if (this.$root._earth.sceneTree.$refs[url]) {
				this.$root._earth.sceneTree.$refs[url].czmObject = tile.czmObject;
			} else {
				this.$root._earth.sceneTree.root.children.push(tile);
			}
			// this.$root_earth.sceneTree.$refs[url].czmObject.maximumScreenSpaceError = 1.0
			this.$root._earth.sceneTree.$refs[url].czmObject.flyTo();
		},
		unloadTile(url) {
			console.log('un' + url);
			this.$root._earth.sceneTree.$refs[url].czmObject = {};
		},
		// 功能资源
		isSelectedSomeThing(menu) {
			return this.selectedList.indexOf(menu) != -1;
		},
		// 获取一组
		getGroupByTitle(title) {
			return this.list.find(i => i.title === title);
		},
		changecolorji(e, i) {
			console.log(e);
			console.log(i);
			let self = this; // eslint-disable-line no-unused-vars

			switch (e) {
				case '距离测量':
					this.$root._earth.analyzation.measurement.type = 'SPACE_DISTANCE';
					break;
				case '高度测量':
					this.$root._earth.analyzation.measurement.type = 'TRIANGLE_DISTANCE';
					break;
				case '面积测量':
					this.$root._earth.analyzation.measurement.type = 'SPACE_AREA';
					break;
				case '结束测量':
					this.$root._earth.analyzation.measurement.type = 'NONE';
					this.$root._earth && this.$root._earth.analyzation.measurement.clearResults();
					break;
				case '地下模式':
					this.$root._earth.terrainEffect.subSurfaceEnabled = true;
					break;
				case '地面透明':
					if (this.opc < 0.0) {
						this.opc = 1.0;
					} else {
						this.opc -= 0.1;
					}
					console.log(this.opc);
					this.$root._earth.terrainEffect.surfaceOpacity = this.opc;
					break;
				case '地形服务':
					this.controlTerrain('http://117.73.254.217:2221/resources/sddem');
					break;
				case '属性查询':
					if (!this.attrEnable) {
						let viewer = this.$root._earth._viewer;
						this.$root._earth.interaction.picking.enabled = true;
						let self = this;
						// eslint-disable-next-line no-undef
						this.entityClickHandler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
						this.entityClickHandler.setInputAction(function(click) {
							var pickedObject = viewer.scene.pick(click.position);
							if (pickedObject) {
								// if (pickedObject.id.label === undefined) {
								let properties = [];
								if (typeof pickedObject.id === 'undefined') {
									let propertyNames = pickedObject.getPropertyNames();
									propertyNames.forEach(x => {
										console.log(x + pickedObject.getProperty(x));
										properties.push({
											key: x,
											value: pickedObject.getProperty(x)
										});
									});
									self.showT2 = true;
									self.attrData = properties;
								} else {
									let propertiesValue = pickedObject.id.properties;
									propertiesValue.propertyNames.forEach(item => {
										properties.push({
											key: item,
											value: propertiesValue[item]._value
										});
									});
									console.log('properties', properties); // 写进属性窗口里
									self.showT2 = true;
									self.attrData = properties;
									self.showAttrBoard = true;
									pickedObject.selected = true;
								}
							}
							// }
							// eslint-disable-next-line no-undef
						}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
					} else {
						this.entityClickHandler.destroy();
						this.entityClickHandler = undefined;
					}
					break;
				default:
					break;
			}
			// 弹框方法
			// this.open();
			// 显示弹框
			// this.showT2 = true;
			// this.showT2=!this.showT2
			// 更新选中内容
			// 清空同层选中的
			let groupValues = this.getGroupByTitle(i);
			let exitsSecondMenus = [];
			if (groupValues) {
				exitsSecondMenus = groupValues.data.map(i => i.title);
				console.log(exitsSecondMenus);
				// 过滤掉当前组内的所有二级
				this.selectedList = this.selectedList.filter(i => exitsSecondMenus.indexOf(i) === -1);
			}
			// 数组
			this.selectedList.push(e);
			console.log(this.selectedList);
		},
		// 数据资源显示隐藏
		showCont(e) {
			this.shows = !this.shows;
			let index = this.lists1.indexOf(e);
			this.lists1[index].shows = e.shows === null ? true : !e.shows;
			console.log(this.lists1[index].shows);
			this.lists1 = [...this.lists1];
		},
		// 功能资源显示隐藏
		showContT(e) {
			let index = this.list.indexOf(e);
			this.list[index].show = e.show === null ? true : !e.show;
			this.list = [...this.list];
			// this.$nextTick(() =>{
			//   e.show = e.show === null ? true : !e.show;
			//   this.list = this.list;
			// });
		},
		// 智能地图
		lists() {
			let formData = new FormData();
			this.tokes = sessionStorage.getItem('token');
			formData.append('token', this.tokes);
			formData.append('type', '1');
			maps(formData).then(res => {
				this.lists1 = res.data;
				// children
				this.lists1.forEach(e => (e.shows = true));
				for (var i = 0; i < this.lists1.length; i++) {
					if (this.lists1[i].children) {
						this.lists1[i].children.forEach(e => (e.showThree = false));
						this.childrens = this.lists1[i].children;
					}
				}
			});
		},
		// 打开
		// open() {
		//   this.showT2 = true;
		//   this.attrData = [{ key: 0, value: "内容" }];
		// },
		// 属性弹框
		ok() {
			this.showT2 = !this.showT2;
		},
		showclick() {
			this.$emit('showclick');
		},
		//
		// handleNodeClick(data) {
		//   if (data.id != undefined && data.url != undefined) {
		//     console.log(data.url);
		//     let a = data.url;
		//     let astr = a.toString();
		//     console.log(astr.substr(astr.length - 4, 4));
		//     if (astr.substr(astr.length - 7, 7) === "geojson") {
		//       this.controlGeojson(a);
		//     } else {
		//       this.controlTile(a);
		//     }
		//   }
		// },
		//  点击二级显示三级
		changecolorE(e, item, ind) {
			this.clickid = e;
			let id = e;
			let formData = new FormData();
			formData.append('token', this.tokes);
			formData.append('id', id);
			resourcesE(formData).then(res => {
				console.log(res);
				this.listArr = res.arr;
				for (var i = 0; i < res.arr.length; i++) {
					if (res.arr[i].photo) {
						res.arr[i].photo = imgurl + res.arr[i].photo;
					}
				}
				let index = ind;
				this.childrens[index].showThree = !this.childrens[index].showThree;
				this.childrens = [...this.childrens];
				if (this.childrens[ind].showThree === true) {
					this.$set(item, 'children', res.arr);
				} else {
					this.$delete(item, 'children', res.arr);
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.active {
	color: #0b61ff;
}
/deep/.el-tree-node__content {
	// width: 10rem;
	height: 2.2rem;
	// border-bottom: 1px solid #0b61ff;
	background: #fff !important;
	overflow-y: auto;
}
// 鼠标移入样式
/deep/.el-tree-node__content:hover {
	background: #fff !important;
}
/deep/.el-tree-node:focus > .el-tree-node__content {
	background-color: #fff; //节点的背景颜色
	color: #0b61ff; //节点的字体颜色
}
/deep/.el-tree-node.is-expanded > .el-tree-node__children {
	display: block;
	overflow: auto;
	max-height: 10rem;
	min-height: 1rem;
}
/deep/.el-tree-node__children::-webkit-scrollbar {
	/*隐藏滚轮*/
	height: 0;
	width: 0;
}
.con {
	display: block;
	overflow: auto;
	max-height: 10rem;
	min-height: 1rem;
	background-color: #ffffff;
	.detail3 {
		// width: 15.7rem;
		height: 2rem;
		font-size: 1rem;
		display: flex;
		align-items: center;
		background: #fff;
		border-bottom: 0.1rem solid #e4e4e4;
		justify-content: space-around;
		.detail3-text {
			-webkit-line-clamp: 1;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			cursor: pointer;
		}
	}
}
.actives {
	color: #0b61ff;
	font-weight: bold;
}
.actives1 {
	color: #0b61ff;
	font-weight: bold;
}
.conent {
	height: auto;
	.conent-flex {
		height: auto;
		position: absolute;
		.conent-flex-l {
			width: 18rem;
			height: auto;
			margin-left: 0.5rem;
			.flex-t {
				height: auto;
				background: #fff;
				margin-bottom: 1rem;
				.flex-t-t {
					border-bottom: 0.1rem solid #e4e4e4;
					margin-top: 0.5rem;
					display: flex;
					.inv-h-se {
						color: #0b61ff;
					}
					.flex-t-t-l {
						width: 50%;
						height: 2rem;
						display: flex;
						align-items: center;
						justify-content: center;
						cursor: pointer;
					}
				}
				.flex-t-t1 {
					width: 14rem;
					height: 1.5rem;
					border-radius: 4rem;
					margin: 0 auto;
					margin-top: 0.6rem;
					border: 0.1rem solid #e4e4e4;
					display: flex;
					justify-content: space-around;
					align-items: center;
					input {
						border: none;
						outline: none;
					}
					input:focus {
						outline: none;
					}
					// img {
					// 	width: 0.2rem;
					// 	height: 0.2rem;
					// }
				}
			}
			.flex-top {
				height: auto;
				.flex-top-t:hover {
					color: blue;
				}
				.flex-top-t {
					padding: 0 2rem;
					height: 2rem;
					background: #146ac1;
					font-size: 1rem;
					display: flex;
					align-items: center;
					justify-content: space-around;
					cursor: pointer;
					border-bottom: 0.1rem #ffffff solid;
					.flex-top-t-l {
						// width: auto;
						width: 100%;
						color: #fff;
					}
					// .flex-top-t1 {
					// 	// width: 100%;
					// 	height: 2rem;
					// 	border-bottom: 0.1rem solid #e4e4e4;
					// }
				}
				.flex-top-t1 {
					width: 5rem;
					height: 5rem;
					cursor: pointer;
					display: flex;
					justify-content: center;
					align-items: center;
					// width: 100%;
					// height: 2rem;
					// font-size: 1rem;
					// display: flex;
					// align-items: center;
					background: #fff;
					// border-bottom: 0.1rem solid #e4e4e4;
					// justify-content: space-evenly;
					.flex-top-t-l-u {
						text-align: center;
					}
					// .flex-top-t-l {
					// 	width: auto;
					// 	display: flex;
					// 	align-items: center;
					// 	justify-content: space-around;
					// 	cursor: pointer;

					// .flex-top-t-l-u-img {
					// 	text-align: center;
					// 	width: 1.5rem;
					// 	height: 1.5rem;
					// 	// margin-right: 1rem;
					// }
					img {
						width: 1rem;
						height: 1rem;
					}
					// }
				}
				.flex-top-t2 {
					width: 100%;
					height: 2rem;
					background: #78afe8;
					font-size: 1rem;
					display: flex;
					align-items: center;
					justify-content: space-around;
					cursor: pointer;
					.flex-top-t-l {
						width: auto;
						color: #fff;
					}
					.flex-top-t1 {
						width: 100%;
						height: 2rem;
						border-bottom: 0.1rem solid #e4e4e4;
					}
				}
			}
		}
		.conent-flex-r {
			width: auto;
			height: auto;
			display: flex;
			flex-direction: column;
			.conent-flex-r-t {
				width: 2rem;
				height: 2rem;
				border-radius: 3rem;
				background: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 1rem;
				cursor: pointer;
				// img {
				// 	width: 0.5rem;
				// 	height: 0.5rem;
				// }
			}
		}
	}
	.images {
		width: 100%;
		height: auto;
		// img {
		// 	width: 100%;
		// 	height: 49.1rem;
		// }
	}
}
//
.xbsj-model-box {
	position: absolute;
	// background: #000;
	background-color: rgba(0, 0, 0, 0.5);
	opacity: 1;
	top: 14rem;
	left: 20rem;
	border-radius: 3px;
	z-index: 10009;
	width: 20rem;
	// height: 10rem;
	height: 30%;
	box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.4);
	color: #ffffff;
	font-size: 14px;
	font-family: \5fae\8f6f\96c5\9ed1;
}
.model-content {
	position: relative;
	padding: 4px;
	overflow: auto;
	::-webkit-scrollbar {
		display: none; /* Chrome Safari */
	}
	.content-box {
		width: 100%;
		height: auto;
		display: flex;
		.content-box-c {
			max-width: auto;
			text-align: right;
			padding-right: 1rem;
			height: 1.5rem;
			line-height: 1.5rem;
			min-width: auto;
			border-right: 0.1rem solid #d2d2d2;
			.content-box-l {
				width: auto;
				height: auto;
				margin-left: 0.6rem;
			}
		}

		.content-box-r {
			height: 1.5rem;
			line-height: 1.5rem;
			width: auto;
			margin-left: 1rem;
		}
	}
}
.xbsj-model-footers {
	text-align: right;
	border-top: 1px solid #d2d2d2;
	margin-top: 10rem;
	padding: 0.5rem 0;
}
.flex-top-t1-1 {
	// width: 100%;
	cursor: pointer;
	text-align: left;
	height: 2.8rem;
	line-height: 2.8rem;
	padding-left: 5rem;
	border-bottom: 0.1rem #e4e4e4 solid;
}
.con::-webkit-scrollbar {
	display: none; /* Chrome Safari */
}
</style>
